<template>
  <div class="layout">
    <!-- 你的头部组件区域 -->
    <div class="header_container">
      <Header @select="handleSelect"></Header>
    </div>
    <!-- 你的子菜单组件区域 -->
    <div class="banner_container">
      <BannerHeader :second-router-list="secondRouterList"></BannerHeader>
    </div>
    <!-- 你的主视图区域 -->
    <div class="main_container">
      <!-- 你的侧边栏区域 -->
      <div class="sidebar">
        <sidebar :select-item="selectItem"></sidebar>
      </div>

      <!-- 内容组件区域 -->
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import sidebar from '../components/sideBars/LeftSide.vue'
import Header from '../components/header/AppHeader.vue'
import BannerHeader from '../components/header/BannerHeader.vue';
import { ref } from 'vue';

const secondRouterList = ref([]);//二级路由列表
const selectItem = ref('');//一级菜单选中项,用于确认左侧菜单栏内容
//监听二级路由列表的变化
const handleSelect = (newList,newSelectedItemName) =>{
  secondRouterList.value = newList;
  selectItem.value = newSelectedItemName;
}

</script>

<style lang="less">
@color-bg: #3169d7;
@banner-bg-color: #02a7f0;

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-color: @color-bg;
}

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .header_container {
    height: 60px;
  }

  .banner_container {
    height: 40px;
    background-color: @banner-bg-color;
  }

  .main_container {
    height: calc(100% - 100px);
    display: flex;
    flex-direction: row;

    .sidebar {
      height: 100%;
      width: 300px;
    }

    .content {
      height: 100%;
      width: 100%;
      background-color: #fff;
    }
  }
}
</style>
